<template>
  <div class="header">
    <div class="header-left">
      <i class="iconfont">&#xe624;</i>
    </div>
    <div class="header-content">
      <input type="text" placeholder="输入城市/景点/游玩主题" />
    </div>
    <router-link to="/city">
      <div class="header-right">
        <!-- <span>{{this.$store.state.city}}</span> -->
        <span>{{ this.city }}</span>
        <i class="iconfont">&#xe65d;</i>
      </div>
    </router-link>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "HomeHeader",
  computed: {
    ...mapState("dataStore", ["city"]),
  },
};
</script>

<style lang='stylus' scoped>
// 1rem = 50px;
@import '../../../assets/styles/varibles.styl';

.header {
  display: flex;
  align-items: center;
  height: 0.86rem;
  background: $bgColor;
  color: #fff;

  .header-left {
    width: 0.68rem;
    text-align: center;
    float: left;
  }

  .header-content {
    flex: 1;

    input {
      padding: 0 0.08rem;
      width: 100%;
      border-radius: 0.1rem;
      height: 0.6rem;
    }
  }

  .header-right {
    min-width: 1.04rem;
    padding: 0.2rem;
    text-align: center;
    white-space: nowrap;
    float: right;
    color: #fff;

    .iconfont {
      margin-left: -0.08rem;
      margin-right: -0.12rem;
      vertical-align: top;
    }
  }
}
</style>
